<template>
    <div class="message-item-wrapper" v-show="show">
        <div v-if="showAvatar" class="message-avatar" ref="avatar">
            <div class="avatar">
                <img referrerpolicy="no-referrer" :src="avatarUrl" alt="" class="mc-img">
            </div>
        </div>
        <div class="message-text">
            <p v-show="loading" class="loading-p" ref="loading-text">
                <span style="display: inline-block;" class="dot-pulse"></span>
            </p>
            <p v-html="value" ref="text"></p>
        </div>
    </div>
</template>

<script>
    import anime                    from 'animejs'
    import { elementOffset, sleep } from "../../utily/util";

    export default {
        props   : [ 'item', 'value', 'type', 'prevType', 'avatar', 'animationName', 'duration' ],
        data() {
            return {
                show     : true,
                loading  : false,
                avatarUrl: CONFIG.CHAT_PAGE.AVATAR,
                animation: '',
            }
        },
        computed: {
            showAvatar() {
                return this.avatar || (!this.avatar && this.type === 'left');
            },
            hiddenAvatar() {
                return this.type === 'left' && this.prevType === 'left';
            }
        },
        mounted() {
            console.log('this.item :', this.item);
            this.animation = this.animationName;

            if (!this.animation) {
                if (this.type === 'left')
                    this.animation = 'left-default';

                if (this.type === 'right')
                    this.animation = 'right-default';

            }


            this.checkAnime();
        },
        methods : {
            checkAnime() {
                switch (this.animation) {
                    case 'left-default':
                        this.leftDefault();
                        break;
                    case 'right-default':
                        this.rightDefault();
                        break;
                    case 'right-select':
                        this.rightSelect();
                        break;
                }
            },
            async leftDefault() {

                anime({
                    targets   : this.$refs.avatar,
                    opacity   : [ 0, 1 ],
                    translateX: [ '-100%', 0 ],
                    easing    : 'easeInOutQuad',
                    duration  : 300,
                });
                await sleep(300);
                this.loading = true;

                if (this.item.duration) {
                    // this.loading = true;
                    anime({
                        targets : this.$refs[ 'loading-text' ],
                        opacity : [ 0, 1 ],
                        scale   : [ 0.5, 1 ],
                        easing  : 'easeOutExpo',
                        duration: 300,
                    });

                    await sleep(this.item.duration);
                }
                this.loading = false;
                console.log('this.loading :', this.loading);

                this.$nextTick(() => {
                    anime({
                        targets : this.$refs.text,
                        opacity : [ 0, 1 ],
                        scale   : [ 0.1, 1 ],
                        easing  : 'easeOutExpo',
                        duration: 500,
                    })
                })

            },
            rightSelect() {
                const item       = this.item;
                item.show        = false;
                const itemOffset = elementOffset(item.el);

                const elOffset = elementOffset(this.$refs.text);
                console.log('elOffset :', elOffset);
                console.log('itemOffset :', itemOffset);
                console.log(' :', elOffset.left - itemOffset.left);
                anime.set(this.$refs.text, {
                    width       : itemOffset.width,
                    height      : itemOffset.height,
                    lineHeight  : (itemOffset.height / 2) + 'px',
                    left        : itemOffset.left - elOffset.left + (itemOffset.width - elOffset.width),
                    top         : itemOffset.top - elOffset.top,
                    opacity     : 1,
                    textAlign   : 'center',
                    borderRadius: '0.23rem',
                });
                anime({
                    targets                : this.$refs.text,
                    width                  : elOffset.width,
                    height                 : elOffset.height,
                    lineHeight             : (elOffset.height / 2) + 'px',
                    borderRadius           : '0.56rem',
                    borderBottomRightRadius: '0.2rem',
                    left                   : 0,
                    top                    : 0,
                    easing                 : 'easeInOutQuad',
                    duration               : 500,
                })


                /*
                itemEl.addClass('message');

                anime({
                    targets   : item.el,
                    width     : [ itemOffset.width, elOffset.width ],
                    height    : [ itemOffset.height, elOffset.height ],
                    lineHeight: [ itemOffset.height + 'px', elOffset.height + 'px' ],
                    left      : [ itemOffset.left, elOffset.left ],
                    top       : [ itemOffset.top, elOffset.top ],

                    easing  : 'easeInOutQuad',
                    duration: 70000,
                    complete: () => {
                        this.show = true;
                        item.show = false;
                    }
                });

                 */
            },
            rightDefault() {
                const el = this.$refs.text;
                $(el).css({
                    transformOrigin: 'right bottom'
                });

                console.log('rightDefault ');

                anime({
                    targets : el,
                    opacity : [ 0, 1 ],
                    scale   : [ 0.5, 1 ],
                    easing  : 'easeOutExpo',
                    duration: 400,
                });
            }

        }
    }
</script>

<style scoped lang="less">

    p {

        opacity: 0;
    }

    .loading-p {
        line-height: 0 !important;
        /*width: 1rem;*/

        position: absolute;
        left: 0;
        top: 0;
        padding-left: .5rem !important;
        padding-right: .5rem !important;

    }

</style>
